<template>
  <div title="我要反馈">
    <!-- <div class="app-feed-back-and-help" @click="gotoTXC">
      <div class="logo-wrap"><div class="logo"></div></div>
    </div> -->
  </div>
</template>

<script>
export default {
  methods: {
    gotoTXC() {
      const form = document.createElement('form');
      form.id = 'form';
      form.name = 'form';
      document.body.appendChild(form);

      const data = {
        nickname: this.getNickname(),
        avatar: 'https://abc-pcweb-1251316161.file.myqcloud.com/others/ost/docs/qq.png',
        openid: this.getOpenID(),
        customInfo: location.href,
      };

      for (const key in data) {
        const input = document.createElement('input');
        input.type = 'text';
        input.name = key;
        input.value = data[key];
        form.appendChild(input);
      }
      form.method = 'POST';
      form.target = '_blank';
      form.action = 'https://support.qq.com/product/366887';
      form.submit();
      document.body.removeChild(form);
    },
    getOpenID() {
      let openid = localStorage.getItem('bot_wiki_openid');
      if (!openid) {
        openid = `bot_openid_${this.randomString(10)}`;
        localStorage.setItem('bot_wiki_openid', openid);
      }
      return openid;
    },
    getNickname() {
      let nickname = localStorage.getItem('bot_wiki_nickname');
      if (!nickname) {
        nickname = `wikiUser_${this.randomString(6)}`;
        localStorage.setItem('bot_wiki_nickname', nickname);
      }
      return nickname;
    },
    randomString(len) {
      const str = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
      let pwd = '';
      for (let i = 0; i < len; i++) {
        pwd += str.charAt(Math.floor(Math.random() * str.length));
      }
      return pwd;
    },
  },
};
</script>
<style>
.app-feed-back-and-help {
  cursor: pointer;
  width: 50px;
  height: 50px;
  position: fixed;
  z-index: 19;
  bottom: 75px;
  right: 23px;
  padding: 10px;
  border-radius: 3px;
  font-size: 13px;
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app-feed-back-and-help .logo-wrap {
  cursor: pointer;
  opacity: 0.9;
  padding: 15px 10px 10px;
  border-radius: 50%;
  background: linear-gradient(-180deg, #dadfea, #ebedf5);
}

.app-feed-back-and-help .logo-wrap:hover {
  background: #418dff;
}

.app-feed-back-and-help .logo-wrap:hover .logo {
  background: url()
    no-repeat 0;
}

.app-feed-back-and-help .logo-wrap .logo {
  width: 32px;
  height: 28px;
  background: url()
    no-repeat 0;
}
</style>
